import React from "react";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from './storeOne';

function RenderInput({ inputValue, actions }) {

  const onChange = (e) => {
    actions.setTimeOutChangeInputValue(e.target.value)
  }

  return (
    <div>
      <input type="text" onChange={onChange}/>
      <div>{inputValue}</div>
      <button>确认</button>
    </div>
  )
}

const mapStateToProps = (state) => {
  return ({
    inputValue: state.reducerOne.inputValue
  })
}

// const mapDispatchToProps = (dispatch) => {
//   return {
//     changeInputValue: (payload) => dispatch(actionCreators.changeInputValue(payload))
//   }
// }

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actionCreators, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(RenderInput);
